<template>
    <div id="app">
        <router-view v-if="isRouterAlive"/>
    </div>
</template>

<script>
import  {getVersionData} from '@/api/version/version'
export default {
    name: 'App',
    provide() {
        return {
            reload: this.reload
        }
    },
    data() {
        return {
            isRouterAlive: true,
            version: '20230516_17:21',
            versionData:'',
            versionCheckInterval:null
        }
    },
    created() {
        // Vue.prototype.isMobileRes = this.isMobile
        // this.localSocket()
        this.getVersion(); // 初始请求版本号
        this.startVersionCheck(); // 只有在未刷新过的情况下启动定时器
    },
    beforeDestroy() {
        clearInterval(this.versionCheckInterval); // 清除定时器
    },
    methods: {
        getVersion() {
            getVersionData().then(res => {
                const newVersion = res.data.version;
                const oldVersion = localStorage.getItem('appVersion');

                // 如果是第一次获取版本号（oldVersion 不存在）
                if (!oldVersion) {
                    localStorage.setItem('appVersion', newVersion);
                    console.log('首次获取版本号，刷新页面');
                    window.location.reload(); // 刷新页面
                } else if (oldVersion !== newVersion) {
                    localStorage.setItem('appVersion', newVersion);
                    console.log('版本号不一致，刷新页面');
                    window.location.reload(); // 刷新页面
                } else {
                    localStorage.setItem('appVersion', newVersion);
                }
            }).catch(error => {
                console.error('获取版本号失败:', error);
            });
        },
        startVersionCheck() {
            this.versionCheckInterval = setInterval(() => {
                this.getVersion();
            }, 30000); // 30秒
        },
        checkVersion() {
            let key = 'agriculture_version'
            let version = sessionStorage.getItem(key)
            if (version == null) {
                version = this.version
                sessionStorage.setItem(key, version)
                this.reload()
            } else {
                if (this.version !== version) {
                    version = this.version
                    sessionStorage.setItem(key, version)
                    this.reload()
                }
            }
            console.log(version)
        },
        reload() {
            this.isRouterAlive = false
            this.$nextTick(function() {
                this.isRouterAlive = true
            })
        }
    },
    metaInfo() {
        return {
            title: this.$store.state.settings.dynamicTitle && this.$store.state.settings.title,
            titleTemplate: title => {
                return title ? `${title} - ${process.env.VUE_APP_TITLE}` : process.env.VUE_APP_TITLE
            }
        }
    }
}
</script>

<style lang="scss">

@media screen and (max-width: 500px) {
    .el-message-box {
        width: 300px !important;
    }
}

@media screen and (max-width: 500px) {
    .el-dialog__wrapper .el-dialog {
        width: 385px !important;

        .el-dialog__body {
            padding: 10px 20px !important;

            //.el-form-item__label {
            //  width: 68px !important;
            //}
            //
            //.el-select, .el-input {
            //  width: 180px !important;
            //}
        }
    }
}
</style>
